<template>
  <div class="w-full p-6">
    <h1 class="font-semibold text-2xl text-center">低码问卷系统</h1>

    <!-- 按钮组 -->
    <div class="mb-4">
      <el-button type="primary" :icon="Plus" @click="toEditor">
        新增问卷
      </el-button>
      <el-button type="success" :icon="ShoppingCart" @click="toMarket">
        组件市场
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        fixed
        prop="createTime"
        label="创建日期"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column prop="title" label="问卷标题" />
      <el-table-column
        prop="updateTime"
        label="最近更新日期"
        width="180"
        align="center"
        :formatter="formatDate"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="selectSurvey(scope.row)">
            查看问卷
          </el-button>
          <el-button link type="primary" @click="editSurvey(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" @click="deleteSurvey(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { Plus, ShoppingCart } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import useDBOperation from "@/db/operation";
import type { ISurveyDB, ISurveyDBReturn } from "@/types";
import { formatDate } from "@/utils/tools";
import { useEditorStore } from "@/stores/useEditor";

const router = useRouter();

const editorStore = useEditorStore();

// - 问卷列表
const tableData = ref<ISurveyDB[]>([]);

// * 获取问卷列表
const getSurveyList = async () => {
  const res = await useDBOperation.getAllSurvey();
  tableData.value = res;
};
getSurveyList();

// * 跳转至编辑器
const toEditor = () => {
  // - 记录当前进入编辑器页
  localStorage.setItem("activeView", "editor");
  router.push("/editor/survey-types");
};

// * 跳转至组件市场
const toMarket = () => {
  // - 记录当前进入组件市场页
  localStorage.setItem("activeView", "materials");
  router.push("/materials");
};

// * 查看问卷
const selectSurvey = (row: ISurveyDBReturn) => {
  router.push({
    path: `/preview/${row.id}`,
    state: {
      from: "home",
    },
  });
};

// * 编辑问卷
const editSurvey = (row: ISurveyDBReturn) => {
  router.push({
    path: `/editor/${row.id}/survey-types`,
  });
};

// * 删除问卷
const deleteSurvey = (row: ISurveyDBReturn) => {
  console.log(row);
  ElMessageBox.confirm("确定删除问卷吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      editorStore.deleteSurveyById(row.id).then(() => {
        ElMessage.success("删除问卷成功");
        getSurveyList();
      }).catch(() => {
        ElMessage.error("删除问卷失败");
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除问卷");
    });
};

defineOptions({
  meta: {
    title: "首页",
    __isRouteComponent: true,
  },
});
</script>
